<template>
    <div class="flex-img">
        <div class="el-upload-list el-upload-list--picture-card" v-show="hideShow">
            <div class="el-upload-list__item is-success">
                <img class="flex-img__image" :src="props.imageUrl">
                <label class="el-upload-list__item-status-label">
                    <el-icon>
                        <Check color="#fff" />
                    </el-icon>
                </label>
                <span class="el-upload-list__item-actions">
                    <span @click="handlePictureCardPreview()">
                        <el-icon>
                            <ZoomIn />
                        </el-icon>
                    </span>
                    <span class="el-upload-list__item-delete" v-show="props.disabledBoolean ? false : true">
                        <el-icon @click.stop="handleRemove()">
                            <Delete />
                        </el-icon>
                    </span>
                </span>
            </div>
        </div>
        <el-upload class="image-uploader" :show-file-list="false" :headers="state.headers" :action="state.baseUrl"
            :on-success="handleAvatarSuccess" :before-upload="beforeUpload" v-show="!hideShow">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
        <el-dialog v-model="state.dialogVisible" append-to-body style="width:420px ;">
            <img style="width:420px ;height: 400px;" :src="props.imageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, defineProps, watch, computed, defineEmits } from "vue";
import { Plus, ZoomIn, Delete, Check } from "@element-plus/icons-vue";

import { getToken } from "../utils/auth";

const state = reactive({
    file: props.imageUrl ? props.imageUrl : '',
    headers: {
        Authorization: `Bearer ${getToken()}`
    }, //上传地址
    imageUrl: '',
    imageForm: "",//给父组件传值
    dialogVisible: false,//控制大图预览
    baseUrl: `${import.meta.env.BASE_IP}:8888/api/uploadFile`
})
const props = defineProps({
    imageUrl: {//父组件传值过来照片回显
        type: String,
        dispatch ()
        {
            return "";
        }
    },
    disabledBoolean: {//父组件传过来是编辑，还是查看
        type: Boolean,
        default ()
        {
            return false;
        }
    }
})



const hideShow = computed(() =>
{
    return state.file === '' ? false : true
})


const handlePictureCardPreview = () =>
{
    state.dialogVisible = true;
}

const beforeUpload = (file) =>
{
    const imageSize = file.size / 1024 / 1024 < 1;//上传图片大小不超过1M
    if (!imageSize) {
        ElMessage.error('上传封面大小不能超过 1MB!')
    }
    return imageSize;
}
//删除照片是清空所有
const handleRemove = () =>
{
    state.file = '';
    props.imageUrl = "";
    state.imageForm = "";
}
const emits = defineEmits(['updateImage'])
const handleAvatarSuccess = (res, file) =>
{
    console.log(res, "===");
    props.imageUrl = res.data.filename
    state.imageForm = res.data.filename;
}
watch(() => props.imageUrl, (newVal, oldVal) =>
{
    state.file = newVal
}, {
    immediate: true,
    deep: true,
})
watch(() => state.imageForm, (newVal, oldVal) =>
{
    emits('updateImage', newVal)
}, {
    immediate: true,
    deep: true,
})
</script>

<style scoped>
.flex-img {
    display: flex;
}

.image-uploader {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 148px;
    height: auto;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;
    text-align: center
}

.image-uploader {
    font-size: 28px;
    color: #8c939d;
}

.image-uploader .el-upload:hover {
    border-color: #409EFF;
}

.flex-img__image {
    width: 146px;
    height: auto;

    border-radius: 6px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-upload-list {
    border-radius: 50%;
}
</style>
